<template>
  <div>
    <!-- 首页头部开始 -->
    <mt-header id="header">
      <div slot="left">
        <img class="headerone" src="~assets/img/logo2.png" alt />
      </div>
      <div slot="right" v-if="this.$store.state.uname == ''">
        <router-link to="/login" id="a">登录</router-link>
      </div>
      <div slot="right" v-else>
        <span style="color:#2486b9">
          {{ this.$store.state.uname }}
          <span style="color:#918072">&nbsp;|&nbsp;</span>
        </span>
        <span id="a" @click="logOut">注销</span>
      </div>
    </mt-header>
    <!-- 搜索框开始 -->
    <router-link to="/search">
      <van-search
        placeholder="搜索目的地/攻略/游记"
        input-align="center"
        class="search-width"
      />
    </router-link>

    <!-- 搜索框开始 -->
    <!-- 头部结束 -->
    <!-- 轮播图 -->
    <mt-swipe :auto="3000" class="swipem-argin">
      <!-- 数据库数据获得数据后替换 -->

      <!-- <mt-swipe-item v-for="(banner, index) in banner" :key="index">
        <img :src="banner[i]" alt="" />
      </mt-swipe-item>-->
      <mt-swipe-item>
        <a href="https://m.mafengwo.cn/i/20826349.html">
          <img
            src="https://n1-q.mafengwo.net/s17/M00/1A/DF/CoUBXl9rXmqAVvjbACSXXnd3V4g107.png?imageMogr2%2Fthumbnail%2F%21750x422r%2Fgravity%2FCenter%2Fcrop%2F%21750x422%2Fquality%2F90"
            alt
          />
        </a>
      </mt-swipe-item>
      <mt-swipe-item>
        <a href="https://m.mafengwo.cn/i/20830318.html">
          <img
            src="https://n1-q.mafengwo.net/s17/M00/29/FE/CoUBXl9p4FyAB6_nAB_iGMO7leQ365.png?imageMogr2%2Fthumbnail%2F%21750x422r%2Fgravity%2FCenter%2Fcrop%2F%21750x422%2Fquality%2F90"
            alt
          />
        </a>
      </mt-swipe-item>
      <mt-swipe-item>
        <a href="https://m.mafengwo.cn/i/19533544.html">
          <img
            src="https://n1-q.mafengwo.net/s17/M00/E7/62/CoUBXl9ogYSARM-3ACiN9sf-93c618.png?imageMogr2%2Fthumbnail%2F%21750x422r%2Fgravity%2FCenter%2Fcrop%2F%21750x422%2Fquality%2F90"
            alt
          />
        </a>
      </mt-swipe-item>
    </mt-swipe>
    <!-- 轮播图结束 -->
    <!-- <router-link to="/my">我的</router-link> -->
    <!-- banner区域开始 -->
    <banner-or></banner-or>
    <!-- banner区域结束 -->
    <!-- 推荐攻略区域开始 -->
    <tjgo></tjgo>
    <!-- 推荐攻略区域结束-->
  </div>
</template>

<script>
// 引入banner区域
import bannerOr from "../views/index/banner";
// 引入推荐攻略模块
import tjgo from "../views/index/tjgo";
// 引入注册组件
// import Login from "./login";
export default {
  components: {
    bannerOr,
    tjgo,
    // login,
  },
  data() {
    return {};
  },
  methods: {
    logOut() {
      sessionStorage.removeItem("id");
      sessionStorage.removeItem("uname");
      this.$store.state.uname = "";
    },
  },
};
</script>

<style scoped>
body {
  font-family: "PingFangSC-Light", Arial, Helvetica, sans-serif,
    "Hiragino Sans GB";
}
#header {
  line-height: 20px;
  background: #fff;
}
#a {
  color: #ffa800;
}
#search {
  width: 60%;
  margin-left: 20%;
  height: 45px;
  margin-top: -40px;
}
.mint-swipe {
  height: 200px;
}
.mint-swipe img {
  width: 100%;
}
.headerone {
  width: 70%;
}
/* 轮播上下外边距 */
.swipem-argin {
  margin: 1px 0;
}
/* 搜索框 */
.search-width {
  width: 60%;
  margin: -44px 0 0 20%;
  height: 44px;
  z-index: 999999;
}
</style>
